<template>
  <div class="chart-root-wrapper" style="width: 100%">
    <div class="chart-title-wrapper">
      <div class="chart-title">
        打卡明细&nbsp;({{ content ? content.length : "╮(╯▽╰)╭" }})
      </div>
      <div class="chart-options">
        <el-form inline size="small">
          <el-form-item label="科室">
            <el-checkbox-group v-model="filter.office">
              <el-checkbox value="管制一室">一室</el-checkbox>
              <el-checkbox value="管制二室">二室</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-checkbox v-model="filter.finished">已完成</el-checkbox>
            <el-checkbox v-model="filter.unfinished">未完成</el-checkbox>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="filter.name" style="width: 100px"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      v-if="source && content"
      :data="content"
      :default-sort="{ prop: 'startTime', order: 'ascending' }"
      height="500px"
      style="width: 100%"
    >
      <el-table-column
        label="姓名"
        prop="userName"
        sortable
        min-width="60px"
      ></el-table-column>
      <el-table-column
        label="开始时间"
        prop="startTime"
        sortable
        min-width="120px"
      ></el-table-column>
      <el-table-column
        label="结束时间"
        prop="endTime"
        sortable
        min-width="120px"
      >
        <template #default="scope">
          <span v-if="scope.row.endTime == null">未结束</span>
          <span v-else>{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时长" prop="endTime" sortable min-width="60px">
        <template #default="scope">
          <span
            :style="{
              color:
                scope.row.endTime == null
                  ? 'var(--el-color-danger)'
                  : startTime.isAfter(scope.row.startTime)
                  ? 'var(--el-color-warning)'
                  : 'var(--el-text-color-primary)',
            }"
            >{{
              (scope.row.endTime == null ? dayjs() : dayjs(scope.row.endTime))
                .diff(
                  startTime.isAfter(scope.row.startTime)
                    ? startTime
                    : scope.row.startTime,
                  "hour",
                  true
                )
                .toFixed(1)
            }}小时</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="席位"
        prop="seatCode"
        sortable
        min-width="60px"
      ></el-table-column>
      <el-table-column
        label="岗位"
        prop="seatPost"
        sortable
        min-width="60px"
      ></el-table-column>
      <el-table-column
        label="角色"
        sortable
        prop="seatRole"
        min-width="60px"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import { ElNotification } from "element-plus";
import dayjs from "dayjs";
import useHourStore from "@/store/hour.js";
const hourStore = useHourStore();
const filter = ref({
  name: "",
  finished: true,
  unfinished: true,
  office: ["管制一室", "管制二室"],
});
const source = computed(() => hourStore.generalViewConfigs.source);
const startTime = computed(() => dayjs(source.value.start));

const matchOffice = (item) => {
  // try to fix error:
  // undefined (reading 'office')
  let u = source.value.users.filter((user) => user.name == item.userName);
  if (u != null && u.length > 0) {
    return u[0].office;
  } else {
    console.warn(
      "[HOURS] Cannot match userName with item:",
      JSON.stringify(item, null, 2)
      // JSON.stringify(source.value.users)
    );
    return "";
  }
};

const content = computed(() =>
  source.value && source.value.content
    ? source.value.content.filter(
        (item) =>
          (filter.value.name == "" ||
            item.userName.includes(filter.value.name)) &&
          (item.endTime == null
            ? filter.value.unfinished
            : filter.value.finished) &&
          filter.value.office.includes(matchOffice(item))
      )
    : null
);
</script>

<style scoped>
@import "./chartStyles.css";
</style>
